<script>
import { defineComponent, h, computed } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import { ElScrollbar } from 'element-plus'
import MainHeader from './components/header'
import MainFooter from './components/footer'


export default defineComponent({
  name: 'App',
  setup(){
    const route = useRoute()

    const isComponent = computed(() => /^component-/.test(route.name || ''))

    return {

      isComponent,
    }
  },

  render() {
    const notPlay = true

    const notComponent = !this.isComponent

    const mainHeader = notPlay ? h(MainHeader, {
      style: 'position: fixed;top: 0;width: 100%;z-index: 2000',
    }) : null

    const mainFooter = notPlay && notComponent ? h(MainFooter) : null

    const content = [h('div', {
      class: 'main-cnt',
    }, [h(RouterView)]), mainFooter]

    const contentWrapper = notComponent
      ? h(ElScrollbar, null, { default: () => content })
      : content

    return h('div', {
      id: 'app',
      class: {
        'is-component': this.isComponent,
      },
    }, [mainHeader, contentWrapper])
  },
})
</script>
